<template>
  <div v-loading.fullscreen.lock="full_screen_loading">
    <nav-tab title="权限模块" :num.sync="num" :items="menu" @click-item="clickTabItem"></nav-tab>
    <el-container class="container-height">
      <el-main class="container-main">
        <el-tabs v-if="menu && menu.length > 0" v-model="activeName" @tab-click="handleClick" class="fixed-tabs">
          <!-- 暂时不需要项目设置 -->
          <el-tab-pane v-for="item in menu[num].chidren" v-if="item.url !== '/project/setting'" :key="item.title" :label="item.title" :name="item.url">用户管理</el-tab-pane>
        </el-tabs>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script>
import NavTab from "./NavTab";
import SideBar from "./SideBar";

import login from "@/api/login.js";

export default {
  name: "HomePage",
  components: {
    NavTab,
    SideBar
  },
  data() {
    return {
      activeName: undefined,
      menu: undefined,
      full_screen_loading: true,
      num: 0,
      is_mounted: false
    };
  },
  methods: {
    handleClick() {
      this.$router.push(this.activeName);
    }
  },
  async mounted() {
    await login
      .getMenu()
      .then(res => {
        this.menu = res;
        this.full_screen_loading = false;
      })
      .catch(err => {
        this.$message.error(err);
        this.full_screen_loading = false;
      });
    this.activeName = window.location.href.split("#")[1];
    for (let i = 0, len = this.menu.length; i < len; i++) {
      for (let j = 0, jlen = this.menu[i].chidren.length; j < jlen; j++) {
        if (this.activeName == this.menu[i].chidren[j].url) {
          this.num = i;
          this.is_mounted = true;
        }
      }
    }
    if (this.num === 0) {
      this.is_mounted = false;
    }
  },
  watch: {
    num(newVal, oldVal) {
      if (oldVal === 0 && this.is_mounted) {
        this.is_mounted = false;
      } else if (!this.is_mounted) {
        this.activeName =
          this.menu[newVal].chidren[0].url == "/project/setting"
            ? this.menu[newVal].chidren[1].url
            : this.menu[newVal].chidren[0].url;
        this.$router.push(this.activeName);
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.el-main {
  padding: 0;
}
.container-main {
  background-color: #f5f8fb;
  overflow: hidden;
}
.fixed-tabs {
  border-top: 1px solid #d9deea;
  /* position: fixed; */
  /* left: 208px; */
  /* top: 64px; */
  width: 100%;
  background-color: #ffffff;
  height: 56px;
  line-height: 56px;
  z-index: 999;
}
</style>
